<template>
    <el-aside :width="exploreStore.exploreStatus? '60px' : '180px'">
        <el-menu class="el-menu-vertical-demo" 
                 background-color="skyblue" 
                 text-color="black"
                 :collapse=exploreStore.exploreStatus
                 :collapse-transition="false"
                 active-text-color="black"
                 
        >

            <h3 v-show="!exploreStore.exploreStatus">后台管理</h3>
            <h3 v-show="exploreStore.exploreStatus">后台</h3>
            <!-- 单个menu -->
            <el-menu-item  @click="goMenu({name:'home'})">
            <!-- <el-menu-item  :index="'/home'"> -->
                <el-icon><House /></el-icon>
                <span>首页</span>
            </el-menu-item>

            <el-menu-item v-for="item in noChildren()" :key="item.path" @click="goMenu(item)" :index="item.path">
            <!-- <el-menu-item v-for="item in noChildren()" :key="item.path"  :index="item.path"> -->
                <component class="icons" :is="item.icon"></component>
                <span>{{item.label}}</span>
            </el-menu-item>


            <!-- 下拉菜单menu -->
            <el-sub-menu v-for="item in hasChildren()" :key="item.path" :index="item.path">
                <template #title>
                    <component class="icons" :is="item.icon"></component>
                    <span>{{item.label}}</span>
                </template>
                    <el-menu-item v-for="item2 in item.children" :key="item2.path" @click="goMenu(item2)" :index="item2.path">
                    <!-- <el-menu-item v-for="item2 in item.children" :key="item2.path" :index="item2.path"> -->
                        <component class="icons" :is="item2.icon"></component>
                        <span>{{item2.label}}</span>
                    </el-menu-item>
            </el-sub-menu>
        
        </el-menu>
    </el-aside>
</template>

<script setup>
    import { explore } from '../store/index'
    import { onBeforeRouteUpdate,useRouter } from 'vue-router'
    import { breadCum } from '../store/index'
    const router = useRouter()
    const bStore = breadCum()
    const exploreStore =  explore()

    const pageLists = [
        {
            path:'/set',
            name:'set',
            label:'系统设置',
            icon:'Setting',
            url:'set/set'
        },
        {
            path:'/user',
            name:'user',
            label:'用户管理',
            icon:'user',
            url:'UserManage/UserManage'
        },
        
        {
            path:'/goods',
            name:'goods',
            label:'商品管理',
            icon:'Goods',
            children:[
                {
                    path:'/goods/list',
                    name:'goodList',
                    label:'商品列表',
                    icon:'Goods',
                    url:'goods/list'
                },
                {
                    path:'/goods/add',
                    name:'goodAdd',
                    label:'添加商品',
                    icon:'Goods',
                    url:'goods/add'
                }
            ]
        },
        {
            path:'/article',
            name:'article',
            label:'文章管理',
            icon:'Notebook',
            children:[
                {
                    path:'/article/list',
                    name:'articleList',
                    label:'文章列表',
                    icon:'Notebook',
                    url:'article/list'
                },
                {
                    path:'/article/add',
                    name:'articleAdd',
                    label:'添加文章',
                    icon:'Notebook',
                    url:'article/add'
                }
            ]
        },
        {
            path:'/other',
            name:'other',
            label:'其他功能',
            icon:'Notebook',
            children:[
                {
                    path:'/other/chatroom',
                    name:'otherChatroom',
                    label:'聊天室',
                    icon:'Notebook',
                    url:'other/chatroom'
                }
            ]
        }
        
    ]
    const noChildren = () => {
        return pageLists.filter(item=>!item.children)
    }
    const hasChildren = () => {
        return pageLists.filter(item=>item.children)
    }


    //路由跳转
    const goMenu = (item) =>{
        console.log('item',item)
        router.push({ name:item.name })
    }
    // const onRoutes = computed(()=>{
    //     return route.path
    // })

    onBeforeRouteUpdate((from,to)=>{
        bStore.setPage({
            path:from.path,
            name:from.name,
            label:from.meta.title
        })
    })

    
    
    
</script>

<style lang="less" scoped>

    
    .icons{
        width: 18px;
        height: 18px;
        margin-right: 10px;
    }

    .el-menu{
        border-right: none;

        h3{
            color: #fff;
            line-height: 48px;
            text-align: center;
            font-weight: bold;
        }
    }


</style>